<template>
    <div class="job-detail-page">
      <van-nav-bar
        title="人才市场"
        left-arrow
        @click-left="$router.push('/')"
        v-show="$route.path === '/home'"
      />

      <van-nav-bar
        title="人才市场"
        left-arrow
        @click-left="$router.push('/')"
        v-show="$route.path != '/home'"
      >
        <template #right>
          <van-icon name="ellipsis" size="18" @click="showOverlay = true"/>
        </template>
      </van-nav-bar>

      <van-overlay :show="showOverlay" @click="showOverlay = false" class-name="over_layer">
        <van-cell-group class='layer'>
          <van-cell value="查询"/>
        </van-cell-group>
      </van-overlay>

      <div class="infoall">

        <van-grid :column-num="3">
          <div class="gridMoney">
            <div class="money">33300</div>
            <div class="text">充值金额</div>
          </div>
          <div class="gridMoney">
            <div class="money">1200</div>
            <div class="text">提现金额</div>
          </div>
          <div class="gridMoney">
            <div class="money">3300</div>
            <div class="text">扣款金额</div>
          </div>
        </van-grid>
        <van-row class="vanrow" type="flex" justify="center">
          <van-col span="6" class="rowBtn"><van-button type="info">提现</van-button></van-col>
          <van-col span="6" class="rowBtn"><van-button type="info">总记录</van-button></van-col>
          <van-col span="6" class="rowBtn"><van-button type="info">充值</van-button></van-col>
          <van-col span="6" class="rowBtn"><van-button type="info" >会员</van-button></van-col>
        </van-row>
      </div>

        <van-row class="vanrow"  type="flex" justify="center">
          <van-col><van-button type="primary" @click="toAdd()">个人简历填写</van-button></van-col>
        </van-row>

      <div class="jobArr" v-if="jobList.length">
        <com-resume-list
          v-for="(item, index) in jobList"
          :key="index"
          :resumeItem="item"
          :keyWord="'home'"
        ></com-resume-list>
      </div>
      <van-pagination
        v-model="pageIndex"
        style="margin-top: 3px"
        :total-items="total"
        :items-per-page="pageSize"
        force-ellipses
      />



    </div>
</template>

<script>
  import comResumeList from '../../components/comResumeList';

  export default {
    name: 'resume',
    components: {
      comResumeList,
    },
    data(){
      return {
        showOverlay: false,
        images: [
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589284392374&di=0aeafaf608a60a4b4f05473a669a1959&imgtype=0&src=http%3A%2F%2Fwww.shang360.com%2Fupload%2Farticle%2F20161014%2F93205509851476425229.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589284418675&di=11e9991139a7c7a1b1b7b3462846eec3&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F09%2F04%2F1357cbb75e1094e.jpg%2521%2Ffwfh%2F804x659%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589284453445&di=b4e684aab0e796e121878889b59dfebe&imgtype=0&src=http%3A%2F%2Fimg.11665.com%2Fimg01_p%2Fi1%2FT1uT90XhptXXa.hPHb_124541.jpg',
        ],
        activeTab: 0,
        activeTabBar: 0,
        iconColor: 'inherit',
        iconName: 'like-o',
        needObj: {
          photos: [],
        },
        isShow: false,
        isShowFilter: false,
        pageIndex: 1,
        pageSize: 10,
        jobList: [],
        total: 0,
        isRefreshing: false,
      }
    },

    created(){
      // if (this.$route.params.id){
      //   this.jobId = this.$route.params.id
      // } else {
      //   this.$router.back()
      // }

      this._getJobList()
    },

    async mounted(){
      // const res = await this.$api.job.reqJobDetailObj(this.jobId)
      // if (res.code === 200){
      //   this.needObj = res.data
      // }

    },

    methods: {
      // 加_ 是便于分为事件回调函数、和一般函数
      _toHome(){
        // this.$router.back();
      },
      toBack(){
        // this._toHome()
      },
      goToCollect(){
        this.iconColor = 'red'
        this.iconName = 'like'
      },
      async _getJobList(){
        // 分页参数
        const params = {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
        };
        const res = await this.$api.job.reqJobList(params)
        if(res.code === 200){
          this.jobList = res.data.items
          this.total = res.data.count
        }
      },


      toResumeDetailPage(id){
        console.log('首页封装组件---子到父', id)
        this.$router.push({
          path: `/resumeDetail/${id}`,
        })
      },

      toAdd(){
        this.$router.push({
          path: `/resumeDetailAdd`,
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .gridMoney{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;

    .money{
      font-size: 0.6rem;
    }

    .text{
      margin-top: 30rpx;
    }
  }

  .infoall {

    margin-top: 5px;
    padding: 10px 0 10px 0px;
    width:100%;
    background: white;
  }

  .vanrow {
    margin: 10px auto;
  }

  .rowBtn {
    text-align:center;
  }
  .job-detail-page {
    width: 100%;
    height: 100%;
    font-size: 12px;
    background-color: #F1F3F4;
    .over_layer{
      margin-top: 46px;
      height: 100%;
      .layer{
        width: 40%;
        font-size: 14px;
        position: absolute;
        right: 0;
        z-index: 2;
      }
    }
    .detailCard{
      margin: 6px 4px 0 4px;
      background-color: #F1F3F4;
      .swipeImg{
        margin-top: 10px;
        height: 160px;
      }
      .detailDesc{
        margin-top: 10px;
      }
      .warn{
        margin: 8px 0;
        background-color: #F4F4F4;
        /*border-top: 1px solid #E6E6E6;*/
        border: 1px solid #E6E6E6;
        padding: 0 8px;
        .title{
          font-size: 14px;
          margin: 10px 0;
          color: red;
          font-weight: bold;
        }
        .content{
          text-indent: 2em;
          line-height: 1.5;
          text-align: justify;
        }
      }
    }
    .detail-footer{
      position: fixed;
      bottom: 0.2px;
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-between;
      height: 46px;
      background-color: #E5E5E5;
      font-size: 13px;
      text-align: center;
      .all_others{
        .others_items{
          .item{
            display: flex;
            flex-direction: column;
            align-items: center;
            .van-icon{
              font-size: 14px;
            }
          }
        }
        .service{
          width: 20%;
        }
        .collection{
          width: 20%;
        }
        .my_company{
          width: 20%;
        }
        .share{
          width: 20%;
        }
      }
      .signUp{
        color: #ffffff;
        font-size: 16px;
      }


    }
  }
</style>
